<template>
  <div class="people-grid-container">
    <div class="people-grid-left-con">
      <div class="left-top-con">
        <div class="part-header-con">网格管理轮廓</div>
        <div class="part-content-con grid-manage-con">
          <div>
            <div>
              <p>
                <span>2</span>
                <span>个</span>
              </p>
              <p>网格数量</p>
            </div>
            <div>
              <p>
                <span>{{ animatedNumber }}</span>
                <span>平方米</span>
              </p>
              <p>网格覆盖面积</p>
            </div>
            <div>
              <p>
                <span>100</span>
                <span>%</span>
              </p>
              <p>网格覆盖率</p>
            </div>
          </div>
        </div>
      </div>
      <div class="left-center-con">
        <div class="part-header-con">
          安全积分
          <el-select
            v-model="value"
            size="mini"
            @change="handleSelectChange"
          >
            <el-option
              v-for="(item, index) in integralSelectOptions"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="part-content-con">
          <el-table :data="integral" style="width: 100%;overflow-x: hidden;">
            <el-table-column prop="series" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="position" label="位置" align="center">
            </el-table-column>
            <el-table-column prop="integral" label="本月积分" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="left-bottom-con">
        <div class="part-header-con">网格出勤统计</div>
        <div class="part-content-con">
          <div
            style="width: 100%; height: 100%"
            id="bar-con"
            ref="barCon"
          ></div>
        </div>
      </div>
    </div>
    <transition name="right-con">
      <div v-if="isShowRight" class="people-grid-right-con">
        <div v-if="currentGrid" class="part-header-con">
          {{ currentGrid.Name }}--网格信息
          <span @click="handleSpanClick">
            <!-- x -->
            <i class="el-icon-close"></i>
          </span>
        </div>
        <div v-if="currentGrid" class="part-content-con">
          <div class="base-info-con">
            <p>
              <span>网格长</span>
              <span>{{ currentGrid.GridLeader }}</span>
            </p>
            <p>
              <span>当前现场总人数</span>
              <span>{{ currentGrid.currentPersonNum }}</span>
            </p>
          </div>
          <div v-if="data1.length" class="table-area">
            <el-table :data="data1" style="width: 100%">
              <el-table-column prop="name" label="姓名" width="70">
              </el-table-column>
              <el-table-column prop="team" label="施工班组" width="100">
              </el-table-column>
              <el-table-column prop="start-time" label="扫描时间" width="200">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </transition>

    <div class="people-grid-right-con-new">
      <div class="people-grid-right-top">
        <div class="part-header-con">网格列表</div>
        <div class="part-content-con">
          <div class="grids-list-con" v-if="grids.length">
            <div v-for="(grid, index) in grids" :key="index">
              <div>
                {{ grid.name }}
              </div>
              <div>
                <p>
                  <span>当前现场总人数:</span>
                  <span>{{ grid.personCharge }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="people-grid-right-center">
        <div class="part-header-con">工种统计</div>
        <div class="part-content-con" ref="typeOfWork"></div>
      </div>

      <div class="people-grid-right-bottom">
        <div class="part-header-con">
          网格违规详情
          <el-radio-group
            class="radio"
            v-model="radio1"
            @change="changeVideoPie"
            size="mini"
            text-color="#fff"
            fill="#0bc8ac"
          >
            <el-radio-button label="1" value="1">南区</el-radio-button>
            <el-radio-button label="2" value="2">北区</el-radio-button>
          </el-radio-group>
        </div>
        <div class="part-content-con" ref="specialPersonnel">
          <div class="imgs-container" v-if="data2.length">
            <div class="img-conta" v-for="(item, index) in data2" :key="index">
              <div>
                <img
                  @click.prevent.stop="handleImgClick(item)"
                  :src="item.url"
                  alt=""
                />
              </div>
              <div>
                <p>
                  <span>时间:</span>
                  <span>{{ item.time }}</span>
                </p>
                <p>
                  <span>人员:</span>
                  <span>{{ item.person }}</span>
                </p>
                <p>
                  <span>点位:</span>
                  <span>{{ item.point }}</span>
                </p>
                <p>
                  <span>类型:</span>
                  <span>{{ item.type }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="people-grid-center-bottom-con">
      <div class="part-header-con">
        工资代付

        <el-select
          v-model="value2"
          size="mini"
          @change="handleSelectChange2"
        >
          <el-option
            v-for="item in new Date().getMonth() + 1"
            :key="item"
            :label="new Date().getFullYear() + '-' + item + '月'"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="part-content-con" ref="payment"></div>
    </div>

    <el-dialog
      :title="imgDialogTitle"
      :visible.sync="imgDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-img-con">
        <img :src="currentImg" :alt="imgDialogTitle" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as echarts from "echarts";
import gsap from 'gsap'

import {
  PersongridinfoGet,
  PersoninfoGet,
  GetDataByStationId,
  BluetoothPositioning,
  GetStationDataByCol,
  GetViolationsAlarmList,
  GetPersonnelWageStatistics
} from '@/api/people-grid/index.js'

import {
  GetDatasToList
} from '@/api/main'

import walden from './walden.json'

export default {
  data () {
    this.barOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        orient: 'horizontal',
        right: '2%',
        itemWidth: 16,
        data: '',
        textStyle: {
          fontSize: 12,
          color: '#ffffff'
        }
      },
      grid: {
        left: '8%',
        right: '4%',
        bottom: '12%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        data: [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(255, 255, 255, 100%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        minInterval: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '应到',
          type: 'bar',
          barGap: 0.2,
          barWidth: '20%',
          data: [107, 107, 105, 113, 115, 115, 115],
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: '#01d6ba'
            }
          }
        },
        {
          name: '实到',
          type: 'bar',
          barWidth: '20%',
          data: [107, 107, 105, 113, 115, 115, 115],
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: '#1464df'
            }
          }
        }
      ]
    }
    this.barCharts = null

    this.typeOfWorkOptions = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 30,
        top: 20,
        bottom: 20,
        textStyle: {
          color: 'white'
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '90%',
          center: ['35%', '50%'],
          label: {
            position: 'inner',
            align: 'center',
            fontSize: 14,
            color: 'white'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 292, name: '特种作业人员: 292人' },
            { value: 1096, name: '一般作业人员: 1096人' },
            { value: 115, name: '项目管理人员: 115人' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.typeOfWorkCharts = null

    this.specialPersonnelOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 30,
        top: 20,
        bottom: 20,
        textStyle: {
          color: 'white'
        }
      },
      series: [
        {
          name: '违规数量',
          type: 'pie',
          radius: '80%',
          center: ['40%', '50%'],
          label: {
            position: 'inner',
            align: 'center',
            fontSize: 12,
            color: 'white'
          },
          labelLine: {
            show: false
          },
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.specialPersonnelCharts = null

    this.paymentOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        orient: 'horizontal',
        right: 'center',
        itemWidth: 16,
        data: '',
        textStyle: {
          fontSize: 12,
          color: '#ffffff'
        }
      },
      grid: {
        left: '8%',
        right: '4%',
        bottom: '23%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        data: [
          '钢结构',
          '钢筋',
          '混凝土',
          '项目作业队',
          '河北占军',
          '江苏龙源',
          '江西恒祥',
          '溧阳宏丰',
          '溧阳龙腾',
          '南京喜广庆',
          '桐城五建'
        ],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          },
          rotate: 30
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(255, 255, 255, 100%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        minInterval: 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '工资(万元)',
          type: 'bar',
          barGap: 0.2,
          barWidth: '20%',
          data: [
            124.6,
            124.3,
            34.7,
            62.2,
            35.3,
            3.4,
            5.0,
            5.0,
            51.5,
            13.8,
            45.2
          ],
          label: {
            show: true,
            color: '#fff',
            position: 'top'
          },
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: '#01d6ba'
            }
          }
        },
        {
          name: '人数',
          type: 'bar',
          barWidth: '20%',
          data: [136, 85, 67, 92, 46, 4, 12, 3, 73, 28, 27],
          label: {
            show: true,
            color: '#fff',
            position: 'top'
          },
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: '#1464df'
            }
          }
        }
      ]
    }
    this.paymentCharts = null

    this.bei = [
      {
        name: '刘建良',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王利国',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵鹏亮',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '周春良',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王朝',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '齐广平',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '丁扣才',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨爱国',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '董永强',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李兵刚',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郝忠惠',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨保江',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨力强',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李奇',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张泽强',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '闫鹏',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李银辉',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '代鹏',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '贺宝珠',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李春明',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张亚军',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '曹建锋',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郝申树',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郝红刚',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '唐可松',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '石桥华',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵敬敬',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王左旺',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '翟建利',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵朋彪',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '石建力',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '谢玮',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵学东',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵警卫',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '贾发亮',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵燕伟',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵彦超',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王俊强',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵利辉',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵鹏鹏',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵颖超',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李继伍',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张泽良',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '刘朋利',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      }
    ]

    this.nan = [
      {
        name: '柳医刚',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '崔军国',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '付亚军',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '付石强',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王正权',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '游庆忠',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '黄俊杰',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张宝贵',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张福蛇',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵银忠',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张俊慧',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨建',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '谢春龙',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郝春生',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '齐广新',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '谢瑶瑶',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '柳建忠',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王国瑞',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李会鹏',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张军奎',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '张志斌',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '孙成良',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李继俄',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '闫德义',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李鹏',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵中锋',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '刘化亮',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '刘化存',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨金苞',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '赵雪淳',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '范云龙',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '周加瑜',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '王维',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '谢维城',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '周文松',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郑凯',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '方保春',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '李仙花',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '郑礼汉',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      },
      {
        name: '杨枝香',
        team: '钢筋作业队',
        'start-time': '2021-05-05 20:29:02'
      }
    ]

    return {
      isShowRight: false,
      number: 0,
      tweenedNumber: 0,
      currentGridName: '',
      currentGrid: null,
      data1: [],
      grids: [],
      radio1: 1,
      data2: [],
      southArr: [],
      northArr: [],
      integralSelectOptions: [],
      integral: [],
      imgDialogTitle: '',
      imgDialogVisible: false,
      currentImg: '',
      value: new Date().getMonth() + 1,
      value2: new Date().getMonth()
    }
  },
  computed: {
    animatedNumber: function () {
      return this.tweenedNumber.toFixed(0)
    }
  },
  watch: {
    number: function (newValue) {
      gsap.to(this.$data, { duration: 1.0, tweenedNumber: newValue })
    }
  },
  beforeDestroy () {
    this.removeResizeListener()
    this.resetCharts = null
    this.removeGrid()

    this.isShowRight = false
    this.number = 0

    clearTimeout(this.timer01)
  },
  deactivated () {
    this.removeResizeListener()
    this.resetCharts = null
    this.removeGrid()

    this.isShowRight = false
    this.number = 0

    clearTimeout(this.timer01)
  },
  activated () {
    this.handleAreaData()
    if (process.env.NODE_ENV === 'development') {
      this.handleModelDisplay([])
    } else {
      this.handleModelDisplay(['xiangmbTileset'])
    }

    this.handleHtmlLabelShow([
      {
        type: '3',
        handler: function (event) {
          this.isShowRight = true

          this.currentGrid = this.gridList.find((item) => {
            return item.Name === event.target.params.Text
          })

          if (event.target.params.Text.indexOf('南') >= 0) {
            this.data1 = this.nan
            this.currentGrid.currentPersonNum = 40
          } else {
            this.data1 = this.bei
            this.currentGrid.currentPersonNum = 45
          }

          // this.bluetoothPositioning();
        }.bind(this)
      }
    ])

    this.cameraFlyTo()

    setTimeout(() => {
      this.number = 7848
    }, 50)

    this.persongridinfoGet()
    this.personinfoGet()
    // this.getStationDataByCol();

    this.initBar()

    // 临时测试生成饼图
    this.initTypeOfWork()
    this.getPersonnelWageStatistics(10)

    // 网格违规详情
    const south = [
      '钢筋厂加工区枪机1',
      '钢筋厂加工区枪机3',
      '钢筋厂加工区球机2',
      '钢筋厂加工区球机4',
      '钢筋厂加工区球机6'
    ]
    const north = [
      '钢筋厂加工区枪机2',
      '钢筋厂加工区枪机4',
      '钢筋厂加工区球机1',
      '钢筋厂加工区球机3',
      '钢筋加工厂球机5'
    ]
    GetViolationsAlarmList(100).then((res) => {
      if (!res.success) return ''
      const data = res.data
      for (let i = 0; i < data.length; i++) {
        const item = {
          url: 'http://58.49.74.231:85' + data[i].ViolationPhoto,
          time: data[i].time,
          person: data[i].Name || '未识别',
          point: data[i].VideoName,
          type: data[i].Event_description
        }
        if (south.includes(data[i].VideoName)) {
          this.southArr.push(item)
        } else if (north.includes(data[i].VideoName)) {
          this.northArr.push(item)
        }
      }
      this.data2 = this.southArr
    })

    this.getDatasToList()
  },
  inject: [
    'getViewer',
    'handleAreaData',
    'removeGrid',
    'handleHtmlLabelShow',
    'handleModelDisplay'
  ],
  methods: {
    getDatasToList () {
      GetDatasToList().then(res => {
        if (res.data && res.data[1]) {
          const data = JSON.parse(res.data[1].JsonText)
          this.integrals = data
          this.integralSelectOptions = Object.keys(data)
          this.value = this.integralSelectOptions[this.integralSelectOptions.length - 1]

          this.handleSelectChange(this.value)
        }
      })
    },
    handleSelectChange (e) {
      this.integral = this.integrals[e]
    },
    handleSelectChange2 (e) {
      this.getPersonnelWageStatistics(e)
    },
    getPersonnelWageStatistics (month) {
      const nowYear = new Date().getFullYear()
      const nowMonth = month
      GetPersonnelWageStatistics(`${nowYear}-${nowMonth}`).then((res) => {
        if (res.success) {
          const data = res.data
          const xAxis = data.map(item => item.cname)
          const personNum = data.map(item => item.number)
          const amount = data.map(item => (item.amount / 10000).toFixed(2))

          this.paymentOptions.xAxis.data = xAxis
          this.paymentOptions.series[0].data = amount
          this.paymentOptions.series[1].data = personNum
          this.initPayment()
        } else {
          this.initPayment()
        }
      })
    },
    handleImgClick (data) {
      this.imgDialogTitle = data.type + '-' + data.time
      this.currentImg = data.url
      this.imgDialogVisible = true
    },
    changeVideoPie (e) {
      e === '1' ? (this.data2 = this.southArr) : (this.data2 = this.northArr)
    },
    getStationDataByCol () {
      const date = new Date()
      const endYear = date.getFullYear()
      const endMonth = ('0000' + (date.getMonth() + 1))
        .split('')
        .slice(-2)
        .join('')
      const endDate = ('0000' + date.getDate()).split('').slice(-2).join('')
      const now = Date.now()
      const start = new Date(now - 7 * 24 * 60 * 60 * 1000)
      const startYear = start.getFullYear()
      const startMonth = ('0000' + (start.getMonth() + 1))
        .split('')
        .slice(-2)
        .join('')
      const startDate = ('0000' + start.getDate()).split('').slice(-2).join('')
      GetStationDataByCol(
        '' + startYear + startMonth + startDate,
        '' + endYear + endMonth + endDate
      ).then((res) => {
        console.log(res)
        if (res.status !== 200) return
        const data = res.data
        data.sort((el1, el2) => el1.Col0 - 0 - (el2.Col0 - 0))

        this.initBar()
        if (!this.resetCharts) {
          this.addResizeListener()
        }
      })
    },
    handleSpanClick () {
      this.isShowRight = false
    },
    bluetoothPositioning () {
      BluetoothPositioning(this.currentGrid.bluetoothId).then((res) => {
        if (res.status !== 200) return
        const { data } = res
        const arr = data.map((item) => {
          const people = this.personList.find(
            (el) => el.WorkerId === item.col2
          )
          if (people) {
            return {
              name: people.Name,
              team: people.Team,
              'start-time': item.col3
            }
          } else {
            return null
          }
        })

        this.data1 = arr.filter((item) => item !== null)
      })
    },
    getDataByStationId (lazy) {
      this.timer01 = setTimeout(
        () => {
          GetDataByStationId(this.gridStationIds).then((res) => {
            if (!res.success) return this.getDataByStationId(true)
            const { data } = res
            this.gridList.forEach((item, index) => {
              // this.grids[index].personCharge = item.currentPersonNum =
              //   (data[index * 5 + 1] && data[index * 5 + 1].Measure_Value) ||
              //   "";
              item.bluetoothId =
                (data[index * 5 + 4] && data[index * 5 + 4].Measure_Value) ||
                ''
            })
            this.getDataByStationId(true)
            // this.setLabelData()
          })
        },
        lazy ? 10000 : 0
      )
    },
    persongridinfoGet () {
      PersongridinfoGet().then((res) => {
        if (!res.success) return
        const data = res.data
        this.gridList = data
        // this.grids = data.map((item) => {
        //   return {
        //     name: item.Name,
        //     number: item.PersonCount,
        //     personCharge: 0,
        //   };
        // });

        this.grids = [
          {
            name: '钢筋加工北区',
            number: 10,
            personCharge: 44
          },
          {
            name: '钢筋加工南区',
            number: 20,
            personCharge: 71
          }
        ]
        this.gridStationIds = data.map((item) => item.StationId).join(',')
        this.getDataByStationId(false)
      })
    },
    personinfoGet () {
      PersoninfoGet().then((res) => {
        if (!res.success) return
        const data = res.data
        this.personList = data
      })
    },
    setLabelData () {
      const fakeArr = document.querySelectorAll('.label-text3 + div')
      const arr = Array.from(fakeArr)

      arr.forEach((item) => {
        const span = item.querySelector('span')
        const data = this.grids.find((el) => el.name === item.messageText)
        span.textContent = data.personCharge + '/' + data.number
      })
    },
    cameraFlyTo () {
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2705152.2951517957,
          y: 4690631.959123978,
          z: 3359744.0924909185
        },
        orientation: {
          heading: 5.496913164944262,
          pitch: -0.9486955386297682,
          roll: 6.279514437422748
        }
      })
    },
    addResizeListener () {
      window.addEventListener(
        'resize',
        (this.resetCharts = () => {
          this.initBar()
          this.initTypeOfWork()
          // this.initSpecialPersonnel()
          this.initPayment()
        })
      )
    },
    removeResizeListener () {
      window.removeEventListener('resize', this.resetCharts)
    },
    initPayment () {
      this.$refs.payment.removeAttribute('_echarts_instance_')
      this.paymentCharts = echarts.init(this.$refs.payment)
      this.paymentCharts.setOption(this.paymentOptions, true)
    },
    initSpecialPersonnel () {
      this.$refs.specialPersonnel.removeAttribute('_echarts_instance_')
      this.specialPersonnelCharts = echarts.init(
        this.$refs.specialPersonnel,
        walden
      )
      this.specialPersonnelCharts.setOption(this.specialPersonnelOptions, true)
    },
    initTypeOfWork () {
      this.$refs.typeOfWork.removeAttribute('_echarts_instance_')
      this.typeOfWorkCharts = echarts.init(this.$refs.typeOfWork, walden)
      this.typeOfWorkCharts.setOption(this.typeOfWorkOptions, true)
    },
    getFormatDate (millise) {
      const thisWeekDate = new Date(millise)
      const year = thisWeekDate.getFullYear()
      const month = thisWeekDate.getMonth() + 1
      const date = thisWeekDate.getDate()

      return `${year}-${('0' + month).slice(-2)}-${('0' + date).slice(-2)}`
    },
    initBar () {
      const now = new Date()
      const dateList = []
      for (let i = 0; i < 7; i++) {
        const millise = now.getTime() - i * 24 * 60 * 60 * 1000
        dateList.unshift(this.getFormatDate(millise))
      }

      this.barOptions.xAxis.data = dateList

      this.$refs.barCon.removeAttribute('_echarts_instance_')
      this.barCharts = echarts.init(this.$refs.barCon)
      this.barCharts.setOption(this.barOptions, true)
    }
  }
}
</script>

<style lang="less">
@import url("./index.less");
</style>
